<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>


    <script type="text/babel">


        function ChildInput(props){
            return (
                <input type='text' ref={props.descRef}/>
            )
        }

        //Function components cannot have string refs.
        // function ChildInput2(props){
        //     return (
        //         <input type='text' ref={props.desc}/>
        //     )
        // }


        // this.refs ={descKey:input}  自己的组件实例上的this.refs
        class ChildInput2 extends React.Component{
            render(){
                return (
                    <input type='text' ref={this.props.desc}/>
                )
            }
        }
      
        class App extends React.Component{

            constructor(){
                super()
                this.descRef1 = React.createRef() // 000fff111 => {current:null}
                this.descRef2 = React.createRef() // 000fff112 => {current:null}
            }
     
           //descRef = React.createRef()  // {current:null}

            handleClick = ()=>{
                //验证 子组件获取到
                console.log(this);

                // this.descRef1.current.focus()
                this.descRef2.current.focus()
            }

            render(){
                return (
                    <div>
    
                      desc1: <input type='text' name='age'  ref={this.descRef1}/>
                      desc2: < ChildInput descRef = {this.descRef2}/>

                      desc3: < ChildInput2  desc = 'descKey' />
                      <button onClick={this.handleClick}>commit</button>
                    </div>
                )
            }

        }

       

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>